<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>模拟一个数据检测</title>
</head>

<body>
    <script>
        var data = {
            name: '张三',
            age: '21'
        }

        //创建一个监视的实例对象 用于监视data中属性变化
        const obj = new Observer(data);

        function Observer(obj) {

            //汇总对象中的所有key 形成一个数组
            const keys = Object.keys(obj);

            //遍历
            keys.forEach((key) => {
                //函数
                Object.defineProperty(this, key, {
                    get() {
                        return obj[key]
                    },
                    set(val) {
                        console.log('${k}被改了我要去解析模板了。。。。')
                        obj[key] = val
                    }
                })
            })
        }
    </script>
</body>

</html>